<template>
  <div class="chart-container">
    <div ref="chart" class="chart"></div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import * as echarts from 'echarts';

const chart = ref(null);

//临时随机数据，用于展示
const data = Array.from({ length: 30 }, () => [
  Math.floor(Math.random() * 77), 
  Math.floor(Math.random() * 100) 
]);

//后端获取数据的函数
const fetchData = async () => {

};

onMounted(() => {
  fetchData();  
  const myChart = echarts.init(chart.value);
  myChart.setOption({
    title: {
      text: '加入非班级课程人数分布',
      left: 'center',
      textStyle: {
        color: '#333',
        fontWeight: 'bold'
      }
    },
    tooltip: {
      trigger: 'item',
      formatter: '课程数: {b}<br>人数: {c}'
    },
    xAxis: {
      type: 'value',
      name: '非班级课程数',
      min: 0,
      max: 76,
      splitLine: {
        lineStyle: {
          type: 'dashed'
        }
      }
    },
    yAxis: {
      type: 'value',
      name: '人数',
      splitLine: {
        lineStyle: {
          type: 'dashed'
        }
      }
    },
    series: [{
      name: '人数',
      type: 'scatter',
      data: data,
      markPoint: {
        data: [
          { type: 'max', name: '最大值' },
          { type: 'min', name: '最小值' }
        ]
      },
      markLine: {
        data: [{ type: 'average', name: '平均值' }]
      }
    }]
  });
});
</script>

<style scoped>
.chart-container {
  width: 100%;
  height: 40vh;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
  /* background-color: #f0f0f0;  */
}

.chart {
  width: 100%;
  height: 100%;
}
</style>
